<template>
  <div>
    <div>
      <h1>学生添加查询</h1>
      <form action="" @submit.prevent="adds" v-model="form">
        <p>学生姓名: <input type="text" v-model="form.name"></p>
        <p>学生年龄: <input type="number" v-model="form.age"></p>
        <button type="submit">添加</button>
      </form>
      <br><br><br>
    </div>
    <div align="center">
      <table border="1" cellspacing="0">
        <tr>
          <td>学生姓名</td>
          <td>学生年龄</td>
          <td>操作</td>
        </tr>
        <tr v-for="i in stulist">
          <td>{{ i.name }}</td>
          <td>{{ i.age }}</td>
          <td>
            <button @click="del(i.id)">删除</button>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {teacher: localStorage.getItem('tid')},
      stulist: [],
      tid: localStorage.getItem('tid')
    }
  },
  methods: {
    adds() {
      this.axios.post('stuM/', this.form)
        .then(res => {
          this.getStulist()
        })
    },
    getStulist() {
      this.axios.get('stuM/?tid=' + this.tid)
        .then(res => {
          if (res.data.code == 200) {
            this.stulist = res.data.list
          }
        })
    },
    del(id) {
      this.axios.put('stuM/?id=' + id)
        .then(res => {
          this.getStulist()
        })
    }
  },
  mounted() {
    let tid = localStorage.getItem('tid')
    if (!tid) {
      alert('请登陆后再操作')
      this.$router.push({"path": '/tealogin'})
    }
    this.getStulist()
  }
}
</script>

<style scoped>

</style>
